<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}本地有约 - 发现身边的活动{% endblock %}</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 自定义CSS -->
    <style>
        :root {
            --primary-color: #8aa899;
            --primary-dark: #6a8a7a;
            --primary-light: #a8c0b0;
            --secondary-color: #f5f5f5;
            --text-color: #333;
            --text-light: #666;
            --border-color: #ddd;
            --success-color: #81c784;
            --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            --radius: 12px;
        }

        .bg-primary { background-color: var(--primary-color) !important; }
        .text-primary { color: var(--primary-color) !important; }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            border-color: var(--primary-color);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(138, 168, 153, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(138, 168, 153, 0.4);
            background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
            border-radius: 10px;
            font-weight: 500;
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .activity-card {
            transition: transform 0.2s;
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        .activity-card:hover {
            transform: translateY(-5px);
        }

        .rating-stars {
            color: #FFC107;
        }

        .navbar-brand {
            font-weight: bold;
            color: var(--primary-color) !important;
            font-size: 24px;
        }

        .navbar {
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }

        .nav-link {
            color: var(--text-color) !important;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-link:hover {
            color: var(--primary-color) !important;
        }

        .dropdown-menu {
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 8px 0;
        }

        .dropdown-item {
            padding: 10px 16px;
            font-weight: 500;
        }

        .dropdown-item:hover {
            background-color: rgba(138, 168, 153, 0.1);
            color: var(--primary-color);
        }

        .map-container {
            height: 300px;
            border-radius: var(--radius);
            overflow: hidden;
        }

        /* 管理员样式 */
        .admin-menu-item {
            color: var(--primary-color) !important;
            font-weight: 500;
        }

        /* 页脚样式 */
        footer {
            background: linear-gradient(135deg, #2c3e50, #34495e) !important;
        }

        /* 主内容区域 */
        main {
            min-height: calc(100vh - 160px);
        }

        /* 卡片样式 */
        .card {
            border: none;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        /* 输入框样式 */
        .form-control {
            border-radius: 10px;
            border: 2px solid var(--border-color);
            padding: 12px 16px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 4px rgba(138, 168, 153, 0.15);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
        <div class="container">
            <a class="navbar-brand" href="{% url 'location:index' %}">
                <i class="fas fa-users"></i> 本地有约
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'location:index' %}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'location:activity_list' %}">发现活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'location:activity_create' %}">创建活动</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'location:community_home' %}">
                            <i class="fas fa-users me-1"></i>社区讨论
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'location:reward_mall' %}">
                            <i class="fas fa-gift me-1"></i>积分商城
                        </a>
                    </li>
                </ul>

                <div class="navbar-nav">
                    {% if user.is_authenticated %}
                        <div class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                                <img src="{{ user.avatar_url }}"
                                     alt="用户头像" class="rounded-circle me-2" width="32" height="32" style="object-fit: cover;">
                                <span>{{ user.username }}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- 根据用户类型显示不同的菜单项 -->
                                {% if user.is_superuser %}
                                    <li><a class="dropdown-item admin-menu-item" href="{% url 'customer:admin_dashboard' %}">
                                        <i class="fas fa-crown me-2"></i>管理员页面
                                    </a></li>
                                    <li><a class="dropdown-item" href="{% url 'customer:profile' %}">
                                        <i class="fas fa-user me-2"></i>个人中心
                                    </a></li>
                                {% else %}
                                    <li><a class="dropdown-item" href="{% url 'customer:profile' %}">
                                        <i class="fas fa-user me-2"></i>个人中心
                                    </a></li>
                                {% endif %}

                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{% url 'customer:logout' %}">
                                    <i class="fas fa-sign-out-alt me-2"></i>退出登录
                                </a></li>
                            </ul>
                        </div>
                    {% else %}
                        <a class="btn btn-outline-primary me-2" href="{% url 'customer:login' %}">登录</a>
                        <a class="btn btn-primary" href="{% url 'customer:register' %}">注册</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main>
        {% block content %}
        {% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5><i class="fas fa-users me-2"></i>本地有约</h5>
                    <p>发现身边精彩活动，结交志同道合的朋友</p>
                </div>
                <div class="col-md-3">
                    <h6>快速链接</h6>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'location:index' %}" class="text-light">首页</a></li>
                        <li><a href="{% url 'location:activity_list' %}" class="text-light">发现活动</a></li>
                        <li><a href="#" class="text-light">关于我们</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h6>联系我们</h6>
                    <ul class="list-unstyled">
                        <li><i class="fas fa-envelope me-2"></i> contact@localmeet.com</li>
                        <li><i class="fas fa-phone me-2"></i> 400-123-4567</li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="text-center">
                <small>&copy; 2024 本地有约. All rights reserved.</small>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    {% block scripts %}
    {% endblock %}
</body>
</html>